import React, { useRef, useState } from "react";
import { useBoolean, useRequest } from "ahooks";
import style from "./style.module.scss";
import { getConsumptionFormatText } from "../../../utils/formatType";
import { MyNavBar } from "../../../components";
import { useNavigate } from "react-router-dom";
import { dateFormat } from "../../../utils/formatTime";
import { getRecordList, getUserWallet } from "../../../api/wallet";
import { List, Toast } from "react-vant";

interface RecordListState {
  direction: number;
  type: number;
  changeNum: number;
  remark: string;
  createTime: number;
}

const Index: React.FC = () => {
  const navigate = useNavigate();

  // 钱包请求hooks
  const { data: walletData = 0 } = useRequest<number, []>(async () => {
    const resp = await getUserWallet();
    return resp.result;
    // return 123
  });

  // 查询用户消费记录接口参数
  const recordParams = useRef({
    page: 1,
    count: 10,
  });
  // 用户消费记录请求hooks
  // const { data: RecordData = [] } = useRequest<RecordListState[], []>(
  //   async () => {
  //     const resp = await getRecordList(recordParams.current);
  //     return resp.result;
  //   }
  // );

  const [RecordData, setRecordData] = useState<RecordListState[]>([]);
  // 是否加载完毕
  const [finish, { setTrue, setFalse }] = useBoolean(false);

  const onloadRecordData = async () => {
    const resp = await getRecordList(recordParams.current);
    // 是否存在更多数据
    if (resp.result.length) {
      // 第1页不做合并
      if (recordParams.current.page === 1) {
        setRecordData(resp.result);
      } else {
        setRecordData([...RecordData, ...resp.result]);
      }

      // 请求页码+1
      recordParams.current.page++;
      setFalse();
    } else {
      setTrue();
    }
  };

  return (
    <div className={style.wallet}>
      {/* 顶部钱包-余额-操作 */}
      <div className={style.myWallet}>
        {/* 导航栏 */}
        <MyNavBar
          title="我的钱包"
          theme="white"
          style={{ background: "rgba(0,0,0,0)" }}
          onClickLeft={() => {
            navigate(-1);
          }}
        ></MyNavBar>
        {/* 钱包 */}
        <div className={style["myWallet-wrapper"]}>
          <div className={style["myWallet-content"]}>
            {/* 余额 H币 */}
            <b className={style["myWallet-remain"]}>
              {walletData}
              {/* 1500 */}
            </b>
            <p className={style.units}>H币</p>
          </div>
        </div>
        {/* 提现规则 */}
        <div className={style.rule}>满2000H币可提现</div>

        {/* 操作按钮 */}
        <div className={style["opera-btns"]}>
          <button
            onClick={() => {
              // if (walletData < 2000) {
              //   Toast.fail("H币不足2000!");
              //   return;
              // }
              navigate("/wallet/withdrawal");
            }}
          >
            提现
          </button>
          <button
            onClick={() => {
              navigate("/wallet/recharge");
            }}
          >
            充值
          </button>
        </div>
      </div>

      {/* 底部-消费记录 */}
      <div className={style.consumption}>
        <div className={style.recordList}>
          <List
            onLoad={onloadRecordData}
            finished={finish}
            // finishedText="没有更多数据了"
          >
            <ul>
              {RecordData.map((item, i) => {
                return (
                  <li key={i}>
                    <div className={style["recordList-left"]}>
                      <b>{getConsumptionFormatText(item.type)}</b>
                      <span>{dateFormat(item.createTime, "yyyy.MM.dd")}</span>
                    </div>
                    <div className={style["recordList-right"]}>
                      <b
                        style={{
                          color: item.direction === 1 ? "#d92109" : "#3087ea",
                        }}
                      >
                        {item.direction === 1 ? "+" : ""}
                        {item.changeNum}
                        H币
                      </b>
                    </div>
                  </li>
                );
              })}
            </ul>
          </List>
        </div>
      </div>
    </div>
  );
};

export default Index;
